// KPI指标看板模块
const { message } = window.antd;

// 模拟KPI数据
const mockKPIData = {
    salesTarget: {
        current: 85,
        trend: 5,
        threshold: 80
    },
    customerSatisfaction: {
        current: 4.5,
        trend: 0.2,
        threshold: 4.0
    },
    employeeEfficiency: {
        current: 92,
        trend: -3,
        threshold: 90
    },
    orderCompletion: {
        current: 95,
        trend: 2,
        threshold: 90
    }
};

// 初始化图表
function initCharts() {
    const salesChart = echarts.init(document.getElementById('salesChart'));
    const satisfactionChart = echarts.init(document.getElementById('satisfactionChart'));
    const efficiencyChart = echarts.init(document.getElementById('efficiencyChart'));

    // 销售目标完成率趋势图配置
    const salesOption = {
        title: { text: '销售目标完成率趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: { type: 'value', min: 60, max: 100 },
        series: [{
            data: [75, 78, 80, 82, 85, 85],
            type: 'line',
            smooth: true
        }]
    };

    // 客户满意度趋势图配置
    const satisfactionOption = {
        title: { text: '客户满意度趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: { type: 'value', min: 3, max: 5 },
        series: [{
            data: [4.2, 4.3, 4.3, 4.4, 4.5, 4.5],
            type: 'line',
            smooth: true
        }]
    };

    // 员工效率指数趋势图配置
    const efficiencyOption = {
        title: { text: '员工效率指数趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: { type: 'value', min: 80, max: 100 },
        series: [{
            data: [88, 90, 93, 95, 94, 92],
            type: 'line',
            smooth: true
        }]
    };

    salesChart.setOption(salesOption);
    satisfactionChart.setOption(satisfactionOption);
    efficiencyChart.setOption(efficiencyOption);
}

// 更新KPI指标卡片
function updateKPICards() {
    const metrics = document.querySelector('.kpi-metrics');
    Object.entries(mockKPIData).forEach(([key, data]) => {
        const card = metrics.querySelector(`[data-metric="${key}"]`);
        if (card) {
            const value = card.querySelector('.metric-value');
            const trend = card.querySelector('.metric-trend');
            
            value.textContent = data.current + (key === 'customerSatisfaction' ? '' : '%');
            trend.textContent = `${data.trend > 0 ? '↑' : '↓'} ${Math.abs(data.trend)}${key === 'customerSatisfaction' ? '' : '%'}`;
            trend.className = `metric-trend ${data.trend > 0 ? 'positive' : 'negative'}`;

            // 添加预警提示
            if (data.current < data.threshold) {
                const alert = document.createElement('div');
                alert.className = 'alert-indicator warning';
                alert.textContent = '低于目标值';
                card.appendChild(alert);
            }
        }
    });
}

// 初始化KPI指标看板
export function initKPIDashboard() {
    try {
        const contentWrapper = document.querySelector('.content-wrapper');
        contentWrapper.innerHTML = `
            <div class="kpi-dashboard">
                <div class="dashboard-header">
                    <h2 class="dashboard-title">KPI指标看板</h2>
                </div>
                <div class="dashboard-content">
                    <div class="kpi-overview">
                        <h3>KPI总览</h3>
                        <div class="kpi-metrics">
                            <div class="metric-card" data-metric="salesTarget">
                                <div class="metric-title">销售目标完成率</div>
                                <div class="metric-value">85%</div>
                                <div class="metric-trend positive">↑ 5%</div>
                            </div>
                            <div class="metric-card" data-metric="customerSatisfaction">
                                <div class="metric-title">客户满意度</div>
                                <div class="metric-value">4.5</div>
                                <div class="metric-trend positive">↑ 0.2</div>
                            </div>
                            <div class="metric-card" data-metric="employeeEfficiency">
                                <div class="metric-title">员工效率指数</div>
                                <div class="metric-value">92%</div>
                                <div class="metric-trend negative">↓ 3%</div>
                            </div>
                            <div class="metric-card" data-metric="orderCompletion">
                                <div class="metric-title">订单完成率</div>
                                <div class="metric-value">95%</div>
                                <div class="metric-trend positive">↑ 2%</div>
                            </div>
                        </div>
                    </div>
                    <div class="charts-container">
                        <div class="chart-container" id="salesChart"></div>
                        <div class="chart-container" id="satisfactionChart"></div>
                        <div class="chart-container" id="efficiencyChart"></div>
                    </div>
                </div>
            </div>
        `;

        // 初始化图表和更新KPI指标
        initCharts();
        updateKPICards();

        // 定时更新数据（模拟实时数据）
        setInterval(() => {
            updateKPICards();
        }, 30000);

    } catch (error) {
        console.error('初始化KPI指标看板失败:', error);
        message.error('初始化KPI指标看板失败，请刷新页面重试');
    }
}